<template>
	<view class="my">
		<!-- 未登录 -->
		<view class="login" v-if="!token">
			<uni-icons type="contact-filled" color="#999" size="100"></uni-icons>
			<button class="login-btn" @click="login">一键登录</button>
			<text>登录后尽享跟多权益</text>
		</view>
		<!-- 已登录 -->
		<view class="isLogin" v-else>
			<view class="top">
				<image src="../../static/beauty.jpeg" mode=""></image>
				<text>朱斌</text>
			</view>
			<view class="body">
				<!-- one -->
				<view class="one">
					<view>
						<text>6</text>
						<text>我是你爸爸</text>
					</view>
					<view>
						<text>6</text>
						<text>我是你爸爸</text>
					</view>
					<view>
						<text>6</text>
						<text>我是你爸爸</text>
					</view>
					<view>
						<text>6</text>
						<text>我是你爸爸</text>
					</view>
				</view>
				<!-- two -->
				<view class="two">
					<text>我的订单</text>
					<view class="my-goodsInfo">
						<view>
							<uni-icons type="wallet" size="34"></uni-icons>
							<text>我的订单</text>
						</view>
						<view>
							<uni-icons type="contact" size="34"></uni-icons>
							<text>物流快递</text>
						</view>
						<view>
							<uni-icons type="chatboxes-filled" size="34"></uni-icons>
							<text>代付款</text>
						</view>
						<view>
							<uni-icons type="navigate-filled" size="34"></uni-icons>
							<text>退款/退货</text>
						</view>
					</view>
				</view>
				<!-- three -->
				<view class="three">
					<view class="item">
						<text>收货地址</text>
						<uni-icons type="right" size="16"></uni-icons>
					</view>
					<view class="item">
						<text>联系客服</text>
						<uni-icons type="right" size="16"></uni-icons>
					</view>
					<view class="item" @click="logout">
						<view>退出登录</view>
						<uni-icons type="right" size="16"></uni-icons>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		mylogin
	} from '@/api/index.js'
	import {
		mapState
	} from 'vuex'
	import badge from '../../mixins/cart-badge.js'
	export default {
		mixins: [badge],
		data() {
			return {}
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo
			},
			token() {
				return this.$store.state.user.token
			}
		},
		methods: {
			logout() {
				uni.showModal({
					title: '退出',
					content: '是否退出登录',
					success: (res) => {
						if (res.confirm) {
							this.$store.commit('user/updataAddress', {})
							this.$store.commit('user/setToken', '')
							this.$store.commit('user/setUserInfo', '')
						}
					}
				})
			},
			async login() {
				// 微信授权
				const [err, res] = await uni.getUserProfile({
					desc: '用于完善会员资料'
				})
				if (err) return
				const {
					iv,
					rawData,
					signature,
					encryptedData,
					userInfo
				} = res
				// 存储用户信息
				this.$store.commit('user/setUserInfo', userInfo)

				// 获取code
				const [err1, {
					code
				}] = await uni.login()
				if (err1) return

				// 获取token
				const obj = await mylogin({
					iv,
					rawData,
					signature,
					encryptedData,
					code
				})
				console.log(obj)
				this.$store.commit('user/setToken', 'asd123')
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
		background-color: #ccc;
	}

	.my {

		// 未登录
		.login {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 34rpx;
			background-color: #fff;
			height: 800rpx;

			.login-btn {
				margin: 30rpx 0;
				width: 100%;
				height: 86rpx;
				border-radius: 43rpx;
				text-align: center;
				line-height: 86rpx;
				color: #fff;
				background-color: #f00;
			}

			text {
				font-size: 24rpx;
				color: #999;
			}

			&::after {
				content: ' ';
				position: absolute;
				bottom: -30rpx;
				left: 0;
				width: 100%;
				height: 60rpx;
				background-color: #fff;
				border-radius: 50%;

			}
		}

		// 已登录
		.isLogin {
			height: 100%;

			.top {
				width: 100%;
				height: 400rpx;
				background-color: #f00;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
				}

				text {
					color: #fff;
					margin-top: 14rpx;
				}
			}

			.body {
				margin-top: -30rpx;
				margin-left: 4%;

				.one {
					height: 150rpx;
					border-radius: 20rpx;
					display: flex;
					width: 96%;
					background-color: #fff;
					justify-content: space-around;
					margin-bottom: 20rpx;

					view {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						font-size: 30rpx;

						text {
							padding: 4rpx 0;
						}
					}
				}

				.two {
					height: 230rpx;
					background-color: #fff;
					width: 96%;
					border-radius: 20rpx;
					padding: 30rpx;
					margin-bottom: 20rpx;
					box-sizing: border-box;

					.my-goodsInfo {
						display: flex;
						margin-top: 30rpx;
						justify-content: space-between;

						view {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							font-size: 30rpx;

							text {
								margin-top: 4rpx;
								font-size: 28rpx;
							}
						}
					}
				}

				.three {
					width: 96%;
					background-color: #fff;
					box-sizing: border-box;
					padding: 0 20rpx;

					.item {
						height: 90rpx;
						display: flex;
						align-items: center;
						border-bottom: 1rpx solid #eee;
						justify-content: space-between;
					}
				}
			}

		}
	}
</style>
